<template>
	<gzPageWrapper
		ref="gzPageWrapperRef"
		:styles="{ background: '#f7f8fb' }"
		:up="{ use: true, auto: false, page: { num: 1, size: 10 }, textNoMore: '--暂无更多--', empty: { use: false } }"
		:down="{ use: true, auto: false }"
		:nav="{ use: false }"
		:scroll="{ top: 36, fixed: true }"
		@upCallback="upCallback"
	>
		<template #top>
			<view>
				<uni-segmented-control class="uni-tab" :current="vdata.tabCurrent" :values="vdata.tabItems" @clickItem="onClickTabItem" styleType="text" activeColor="#00A952"></uni-segmented-control>
			</view>
		</template>
		<template #default>
			<couponList :couponList='vdata.couponList' />
		</template>
	</gzPageWrapper>
</template>
<script setup>
	import couponList from './couponList.vue'
	import { ref, reactive } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { $couponList } from '@/http/apiManager.js';
	import storageManage from '@/util/storageManage.js'
	
	const gzPageWrapperRef = ref()
	// 数据源
	const vdata = reactive({
		tabItems: ['待激活', '待使用', '已核销', '已过期', '已失效'],	// 3 0 1 2 4 对应的卡券状态
		tabCurrent: 0,	// 当前下标
		// 扫码领券相关数据
		activityId: '',	// 活动id
		couponList: [],	// 卡券列表
	});
	const params = reactive({	// 请求列表 参数
		awardType: 0,
		pageSize: 10,
		pageNumber: 1
	})
	// 根据传递过来的卡券状态 优先展示该状态的卡券列表
	onLoad(async ({ tabCurrent, couponState })=>{
		vdata.tabCurrent = tabCurrent !== undefined ? +tabCurrent : 0
		params.couponState = couponState !== undefined ? +couponState : 3
		getList()
	})
	/**
	 * 切换不同状态的卡券列表
	 */
	const onClickTabItem = ({ currentIndex }) => {
		if (vdata.tabCurrent != currentIndex) {
			vdata.tabCurrent = currentIndex;
			switch (currentIndex){
				case 0:
					params.couponState = 3
					break;
				case 1:
					params.couponState = 0
					break;
				case 2:
					params.couponState = 1
					break;
				case 3:
					params.couponState = 2
					break;
				case 4:
					params.couponState = 4
					break;
				default:
					params.couponState = 3
					break;
			}
			gzPageWrapperRef.value.getMescroll().resetUpScroll()
		}
	}
	/**
	 * 上拉加载
	 */
	function upCallback(mescroll){
		const { size, num } = mescroll
		$couponList({ ...params, pageSize: size, pageNumber: num }).then(({ bizData }) => {
			mescroll.endSuccess(bizData.records.length,bizData.hasNext)
			if(num === 1) vdata.couponList = [];
			vdata.couponList = vdata.couponList.concat(bizData.records)
		}).catch(() => {
			mescroll.endErr()
		})
	}
	/**
	 * 请求卡券列表数据
	 */
	function getList(){
		$couponList(params).then(({ bizData }) => {
			vdata.couponList = bizData.records
		})
	}
</script>

<style lang="scss">
	.uni-tab{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		width: 100%;
	}

	:deep(.segmented-control) {
		background: #fff;
		padding-bottom: 10rpx;
	}
</style>